import React, { useEffect, useState } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import * as echarts from 'ec5'; 

import data from './data'
import options from './options'
import { Select } from 'antd'
import { connect } from 'dva';
import LoadSty from '../../../../utils/hooks'
import { isUndefined, isEmpty } from 'lodash'

const { Option } = Select

function Index({ data: d, Lists, dispatch }) {

    const [Load, setLoad] = useState('flex')

    const InitcreateApp = (config) => {
        // setLoad
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Tlecom'));
        // 绘制图表
        myChart.setOption(options(config));
    }

    useEffect(() => {
        InitcreateApp(data)
    }, [])

    useEffect(() => {
        if (!isEmpty(d.axisData)) {
            InitcreateApp(d)
            setLoad('none')
        }
    }, [d])

    const handleChange = (params) => {
        dispatch({ type: 'leftBottom/getDatas', params })
    }

    const Options = !isUndefined(Lists) && Lists.map((v, i) => {
        return <Option value={v.zyh}>{v.zymc}</Option>
    })

    return (
        <BorderBox1 style={{ flex: 6, marginTop: 30 }} >
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div style={{ position: 'absolute', right: 0, top: 0, zIndex: 2, right: 30, top: 15, transition: '1s' }}>
                <Select defaultValue="法学" allowClear={true} style={{ width: 100, fontSize: 15, background: '#bcdcff' }} onChange={handleChange}>
                    {Options}
                </Select>
            </div>
            <div id="Tlecom" style={{ width: '95%', height: '95%' }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ leftBottom, dispatch }, ownProps) => {
    return {
        data: leftBottom,
        Lists: leftBottom.zyh,
        dispatch
    }
}

const A = connect(mapStateToProps)(Index)
export default A
